<script setup lang="ts">
defineOptions({
  name: "workbench"
});

import { ref, inject } from "vue";
import echartsChart from "@/views/common/components/echartsChart/index.vue";
import { getFabStatus, getFabUpkeep, getFabRepair } from "@/api/modules/fab";
import { useRouterStoreHook } from "@/store/modules/router";
import { status } from "@/utils/constant";
import { type SubjectType } from "@/utils/types";

type itemStyleType = {
  [key: string]: string;
};

interface dataType {
  name: string;
  value: number;
  itemStyle?: itemStyleType;
}

const routerStore = useRouterStoreHook();
const subject = inject("subject", ref<SubjectType>("MACHINE"));

const labelLayoutFn = (ec: any, data: Array<dataType>, title: string) => {
  if (!ec) return null;
  const { getWidth = null } = ec;
  const labelLayout = function (params) {
    if (!getWidth) return null;
    const isLeft = params.labelRect.x < getWidth() / 2;
    const points = params.labelLinePoints;
    points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
    return { labelLinePoints: points };
  };
  const options: CommonEcharts.CommonEchartsOption = {
    title: {
      text: `今日机台\n${title}`,
      textStyle: {
        color: "#555",
        fontSize: 16,
        fontWeight: 500,
        lineHeight: 18
      },
      left: "center",
      top: "center"
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c}台 ({d}%)"
    },
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
      containLabel: true
    },
    series: [
      {
        name: title,
        type: "pie",
        radius: [42, 68],
        center: ["50%", "50%"],
        label: {
          alignTo: "edge",
          formatter: "{name|{b}}\n{num|{c}台}{percent| ( {d}% )}",
          minMargin: 2,
          edgeDistance: 10,
          lineHeight: 20,
          rich: {
            num: {
              fontSize: 14,
              color: "#222",
              lineHeight: 20,
              fontWeight: 600
            },
            percent: {
              fontSize: 10,
              color: "#333",
              lineHeight: 20
            }
          }
        },
        labelLine: {
          length: 15,
          length2: 0,
          maxSurfaceAngle: 80
        },
        labelLayout,
        data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  };
  return options;
};

const labelLayoutStatusFn = async (ec: any) => {
  const title = "状态统计";
  const params = getParams();
  const res = await getFabStatus(params);
  if (!res?.length) return null;
  const data = res.map(item => {
    let { deviceStatus: name = "", num: value = 0 } = item;
    let s = null;
    if (name) {
      s = status.find(item => item.value === name?.toLowerCase());
    } else {
      s = status.find(item => item.value === "unknown");
      name = "Unknown";
    }
    const itemStyle = s ? { color: s.backgroundColor } : null;
    return { name, value, itemStyle };
  });
  return labelLayoutFn(ec, data, title);
};

const labelLayoutUpkeepFn = async (ec: any) => {
  const title = "保养任务";
  const params = getParams();
  const res = await getFabUpkeep(params);
  if (!res?.length) return null;
  const data = res.map(item => {
    const { pmStatusName: name = "", pmStatus = "", num: value = 0 } = item;
    let u = null;
    if (pmStatus) {
      u = status.find(item => item.value === pmStatus?.toLowerCase());
    } else {
      u = status.find(item => item.value === "unknown");
    }
    const itemStyle = u ? { color: u.backgroundColor } : null;
    return { name: name || pmStatus || "Unknown", value, itemStyle };
  });
  return labelLayoutFn(ec, data, title);
};

const labelLayoutRepairFn = async (ec: any) => {
  const title = "维修任务";
  const params = getParams();
  const res = await getFabRepair(params);
  if (!res?.length) return null;
  const data = res.map(item => {
    const { deviceMaintainName: name = "", deviceMaintain = "", num: value = 0 } = item;
    let r = null;
    if (deviceMaintain) {
      r = status.find(item => item.value === deviceMaintain?.toLowerCase());
    } else {
      r = status.find(item => item.value === "unknown");
    }
    const itemStyle = r ? { color: r.backgroundColor } : null;
    return { name: name || deviceMaintain || "Unknown", value, itemStyle };
  });
  return labelLayoutFn(ec, data, title);
};

const getParams = () => {
  const { activeViceMenu: gasName } = routerStore;
  const className = subject.value;
  if (className === "GAS") {
    return { className, gasName };
  } else {
    return { className };
  }
};
</script>

<template>
  <div class="workbench">
    <echartsChart :boxShadow="false" :labelLayoutFn="labelLayoutStatusFn" />
    <echartsChart :boxShadow="false" :labelLayoutFn="labelLayoutUpkeepFn" />
    <echartsChart :boxShadow="false" :labelLayoutFn="labelLayoutRepairFn" />
  </div>
</template>

<style lang="scss" scoped>
.workbench {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
